import ContainerComponent from '../tpl/ContainerComponent';
import TextComponent from '../tpl/TextComponent';
import ButtonComponent from '../tpl/ButtonComponent';
// 组件 和 预览区域 之间的 映射关系
function createConfig() {
  const componentList = [] // 预览模块展示的数据
  const componentMap = {} // 模块之间的 映射关系表

  return {
    componentList,
    componentMap,
    register: (component) => {
      componentList.push(component)
      componentMap[component.key] = component
    }
  }
}
export const registerConfig = createConfig()
const createText = (label) => ({ type: 'input', label })
const createSelect = (label, options) => ({ type: 'select', label, options })
const createColor = (label) => ({ type: 'color', label })
const createWidth = (label) => ({ type: 'input', label })
const createHeight = (label) => ({ type: 'input', label })
const createBgColor = (label) => ({ type: 'bgcolor', label })


export const createStyle = (config) => {
  const style = {
    color: config.color,
    fontSize: config.size || '12px',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  }
  if (config.radius) {
    style.borderRadius = config.radius + 'px'
  }

  if (config.bgcolor) {
    style.backgroundColor = config.bgcolor
  }
  if (config.width) {
    style.width = config.width + 'px'
  }
  if (config.height) {
    style.height = config.height + 'px'
  }

  return style
}
// 字体大小配置
const fontSizeConfig = [{ label: "12px", value: "12px" }, { label: "14px", value: "14px" }, { label: "16px", value: "16px" }, { label: "18px", value: "18px" }, { label: "20px", value: "20px" }, { label: "22px", value: "22px" }, { label: "24px", value: "24px" }, { label: "26px", value: "26px" }, { label: "28px", value: "28px" }]
// 通用基础属性配置
const baseConfig = {
  text: createText('文本'),
  size: createSelect('字体大小', fontSizeConfig),
  color: createColor('字体颜色')
}


registerConfig.register({
  label: '文本',
  preview: () => '预览文本',
  render: ({ config }) => TextComponent(config, '默认'),
  key: 'text',
  config: baseConfig
})
registerConfig.register({
  label: '按钮',
  reSize: {
    width: true,
    height: false
  }, // 是否可以调整大小
  preview: () => "预览按钮",
  render: ({ config,reSize }) => ButtonComponent(config, reSize),
  key: 'button',
  config: {
    width: createWidth('宽度'),
    height: createHeight('高度'),
    ...baseConfig,
    radius: createText('圆角值'),
    bgcolor: createBgColor('背景颜色')
  }
})
// registerConfig.register({
//   label: '表单',
//   preview: () => "预览表单",
//   render: ({ config }) => <input placeholder="渲染表单" value={config.text}></input>,
//   key: 'input',
//   config: baseConfig
// })
registerConfig.register({
  label: '容器方框',
  reSize: {
    width: true,
    height: true
  },
  preview: () => '容器方框',
  render: ({ config,reSize }) => ContainerComponent(config,reSize),
  key: 'component',
  config: {
    width: createWidth('宽度'),
    height: createHeight('高度'),
    radius: createText('圆角值'),
    bgcolor: createColor('背景颜色')
  }
})

// registerConfig.register({
//   label: '组件',
//   preview: () => '预览文本',
//   render: () => '渲染文本',
//   key: 'component'
// })
